<template>
    <div class="knowledge-info-page" :class="[isScreen && 'knowledge-screen-page']">
        <div class="knowledge-info-top-tool">
            <div class="tool-left" id="bread-box" :style="{width:`calc(100% - ${toolRight}px)`}"
                 v-resize="toolLeftSizeChange">
                <span
                    class="knowledge-type">{{
                        knowledgeType == 'all' ? $t('message.silder.allLibraries') : $t('message.silder.myLibraries')
                    }}</span>
                <div class="bread-box">
                    <div class="bread-item" v-if="startRenderList.length>0">
                        <svg class="next-icon">
                            <use xlink:href="#keowledge-a-zu4701"></use>
                        </svg>
                        <el-icon class="hover-back" ref="moreBread" @click="showMoreBread">
                            <MoreFilled/>
                        </el-icon>
                    </div>
                    <template v-for="(item,index) in breadPath" :key="index">
                        <div class="bread-item" @click="backItem(item,index)" v-if="index>=startRender"
                             :id="`bread-item-${index}`">
                            <svg class="next-icon">
                                <use xlink:href="#keowledge-a-zu4701"></use>
                            </svg>
                            <span class="knowledge-name hover-back"
                                  :class="[index == (breadPath.length - 1) && 'knowledge-name-last']" :title="item.name">{{
                                    item.name
                                }}</span>
                        </div>
                    </template>
                </div>
                <div class="line"></div>
                <svg class="back-icon" @click="backKnowledge">
                    <use xlink:href="#keowledge-fanhuishangyiji"></use>
                </svg>
            </div>
            <div class="tool-right" v-resize="toolRightSizeChange">
                <template v-if="checkNode.type && checkNode.type!='knowledge'">
                    <div class="action-button hover-back" @click="toolBarAction('collect')">
                        <i class="knowledge-iconfont icon"
                           :class="[!checkNode.collectIs && 'keowledge-shoucang1',checkNode.collectIs &&'keowledge-shoucang-xuanzhong']"></i>
                        <span>{{
                                !checkNode.collectIs ? $t('message.buttons.collect') : $t('message.buttons.unCollect')
                            }}</span>
                    </div>
                    <div class="action-button hover-back" @click="changeScreen">
                        <img class="icon" :src="`${!isScreen?screenPng:noScreenPng}`">
                        <!-- <i class="knowledge-iconfont icon" :class="[!isScreen && 'keowledge-shoucang1',checkNode.collectIs &&'keowledge-shoucang-xuanzhong']"></i> -->
                        <span>{{ !isScreen ? $t('message.buttons.screen') : $t('message.buttons.unScreen') }}</span>
                    </div>
                    <div class="action-button hover-back" ref="topbarMoreAction" @click="openMoreTopBar">
                        <i class="knowledge-iconfont icon keowledge-gengduo"></i>
                        <span>{{ $t('message.text.more') }}</span>
                    </div>
                    <el-popover
                        ref="topBarMore"
                        :placement="'bottom'"
                        :virtual-ref="topbarMoreAction"
                        trigger="click"
                        virtual-triggering
                        :visible="topBarMorePopover"
                        popper-class="more-popover-action">
                        <el-scrollbar>
                            <div class="more-lists" style="margin:0px 8px;" v-click-outside="topClickOut">
                                <div @click="toolBarAction('copy')" class="more-item more-item-top">
                                    <i class="knowledge-iconfont svg-icon keowledge-fuzhilianjie"
                                       :disabled="!$permissionRole('document_down',checkNode.dcIdentifying)"></i>
                                    <span class="name">{{ $t('message.buttons.copyLink') }}</span>
                                </div>
                                <div @click="toolBarAction('download')" ref="allDownloadRef"
                                     class="more-item more-item-top"
                                     :disabled="!$permissionRole('document_down',checkNode.dcIdentifying)"
                                     :class="[!$permissionRole('document_down',checkNode.dcIdentifying) && 'disabled-click']">
                                    <i class="knowledge-iconfont svg-icon keowledge-xiazai2"
                                       :disabled="!$permissionRole('document_down',checkNode.dcIdentifying)"></i>
                                    <span class="name"
                                          :disabled="!$permissionRole('document_down',checkNode.dcIdentifying)">{{
                                            $t('message.buttons.docDownload')
                                        }}</span>
                                    <svg class="arrow-icon"
                                         v-if="checkNode.type=='document_html' || checkNode.type=='xmind'"
                                         :disabled="!$permissionRole('document_down',checkNode.dcIdentifying)">
                                        <use xlink:href="#keowledge-a-zu4701"></use>
                                    </svg>
                                </div>
                                <div @click="toolBarAction('setting')" class="more-item more-item-top">
                                    <i class="knowledge-iconfont svg-icon keowledge-shezhi1"></i>
                                    <span class="name">{{ $t('message.buttons.docSetting') }}</span>
                                </div>
                            </div>
                        </el-scrollbar>
                    </el-popover>

                    <el-tooltip :disabled="checkNode.share" :content="$t('message.tooltips.noShare')" effect="light">
                        <el-button @click="toolBarAction('share')" style="margin-left:5px;">
                            {{ $t('message.buttons.share') }}
                        </el-button>
                    </el-tooltip>
                    <!-- <el-button v-if="editable" type="primary" @click="toolBarAction('edit')">{{ $t('message.buttons.edit') }}</el-button> -->
                    <div class="more-acitons-line"></div>
                </template>
                <div class="more-actions">
                    <el-tooltip :content="$t('message.tooltips.knowInfo')" class="icon-box" effect="light">
                        <div class="icon-box" :class="[currentOtherType=='showInfo' && 'active']"
                             @click="doAction('showInfo')">
                            <i class="knowledge-iconfont keowledge-wenkuxinxi1"></i>
                        </div>
                    </el-tooltip>
                    <el-tooltip :content="$t('message.tooltips.collaborative')" class="icon-box" effect="light">
                        <div class="icon-box" :class="[currentOtherType=='showUsers' && 'active']"
                             @click="doAction('showUsers')">
                            <i class="knowledge-iconfont keowledge-dongtaiyuchengyuan"></i>
                        </div>
                    </el-tooltip>
                </div>
            </div>
        </div>
        <div class="knowledge-info-body" id="knowledge-info-body">
            <div class="knowledge-left" :style="{width:`${treeWidth}px`}">
                <!--  v-resize="searchSizeChange" -->
                <div class="knowledge-tree-search">
                    <div class="search-box">
                        <el-input v-model="treeSearch" :placeholder="$t('message.placeholder.search')">
                            <template #prefix>
                                <svg class="search-icon">
                                    <use xlink:href="#keowledge-sousuo"></use>
                                </svg>
                            </template>
                        </el-input>
                        <el-dropdown trigger="click" popper-class="sort-dropdown" @command="handleSortCommand">
                            <svg class="sort">
                                <use xlink:href="#keowledge-paixu"></use>
                            </svg>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="createTime,false">
                                      <span class="dropdown-item"
                                            :class="[sortName=='createTime' && sortType && 'active']">
                                          <svg class="check-icon">
                                              <use xlink:href="#keowledge-mobile-gou"></use>
                                          </svg>
                                          {{ $t('message.sort.timeAsc') }}
                                      </span>
                                    </el-dropdown-item>
                                    <el-dropdown-item command="createTime,true">
                                      <span class="dropdown-item"
                                            :class="[sortName=='createTime' && !sortType &&'active']">
                                          <svg class="check-icon">
                                              <use xlink:href="#keowledge-mobile-gou"></use>
                                          </svg>
                                          {{ $t('message.sort.timeDesc') }}
                                      </span>
                                    </el-dropdown-item>
                                    <el-dropdown-item command="name,true">
                                      <span class="dropdown-item" :class="[sortName=='name' && sortType &&'active']">
                                          <svg class="check-icon">
                                              <use xlink:href="#keowledge-mobile-gou"></use>
                                          </svg>
                                          {{ $t('message.sort.nameAsc') }}
                                      </span>

                                    </el-dropdown-item>
                                    <el-dropdown-item command="name,false">
                                      <span class="dropdown-item" :class="[sortName=='name' && !sortType &&'active']">
                                          <svg class="check-icon">
                                              <use xlink:href="#keowledge-mobile-gou"></use>
                                          </svg>
                                          {{ $t('message.sort.nameDesc') }}
                                      </span>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                    <!-- <div class="back-folder-box" v-if="enterFolder">
                      <svg class="icon" @click="backFolder">
                          <use xlink:href="#keowledge-mobile-fanhui"></use>
                      </svg>
                      <div class="folder-name">
                          {{folderInfo.name}}
                      </div>
                  </div> -->
                </div>
                <div class="tree-box" :style="{height:`calc(100% - ${searchHeight}px)`}">
                    <el-scrollbar ref="elTreeScrollRef" @scroll="treeScroll">
                        <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" ref="treeRef"
                                 :filter-node-method="filterNode" v-loading="treeLoading" node-key="id"
                                 :draggable="$permissionRole('document_move',dcLibrary.dcIdentifying)"
                                 @node-drag-start="handleDragStart"
                                 @node-drag-end="handleDragEnd"
                                 @node-drop="handleDrop"
                                 :allow-drop="allowDrop"
                                 :allow-drag="allowDrag">
                            <template #default="{ node, data }">
                                <div class="custom-tree-node"
                                     :class="[hidePopover&&popoverData.id==data.id && 'custom-active']">
                                    <svg class="svg-icon" aria-hidden="true">
                                        <use v-bind:xlink:href="getIcon(data.type,data.nameSuffix)"></use>
                                    </svg>
                                    <div class="node-info" :style="{width:`calc(${treeWidth}px - 94px)`}">
                                        <div v-tooltip-auto-show>
                                            <el-tooltip :content="data.name" effect="light">
                                                <div class="name">{{ data.name }}</div>
                                            </el-tooltip>
                                        </div>
                                        <div class="time">{{ data.createTime }}</div>
                                    </div>
                                    <div class="action-box"
                                         :class="[!$permissionRole(['document_auth_settings','document_add','document_update','document_down','document_share','document_delete','document_move'],data.dcIdentifying) && 'no-auth-aciton-box']">
                                        <svg class="action-icon share" v-if="data.share">
                                            <use xlink:href="#keowledge-a-zu5046"></use>
                                        </svg>
                                        <i class="knowledge-iconfont action-icon more keowledge-gengduocaozuo"
                                           :ref="(el)=>setMoreRef(el,data)" @click.stop="moreClick(node,data)"></i>
                                        <!-- <svg class="action-icon more" :ref="(el)=>setMoreRef(el,data)" @click.stop="moreClick(node,data)">
                                          <use xlink:href="#keowledge-gengduocaozuo"></use>
                                      </svg> -->
                                    </div>
                                </div>
                            </template>
                        </el-tree>
                    </el-scrollbar>
                </div>
            </div>
            <!-- <div class="drop-width-line" :style="{left:treeWidth+'px'}" @mousedown="leftResize($event)"></div> -->
            <div class="knowledge-right" :style="{width:getCurrentWidth}"
                 :class="[checkNode.type=='document_upload' && checkNode.nameSuffix=='txt' &&'txt-right-box']">
                <el-scrollbar ref="viewFileScroll" @scroll="bodyScroll" style="padding-right:8px;">
                    <template v-if="editable">
                        <OfficeEditor v-if="['office_doc', 'office_xlsx', 'office_ppt', 'office_csv'].includes(checkNode.type)"
                            :docId="checkNode.id" :knowId="checkNode.knowledgeId" :key="checkNode.id"></OfficeEditor>
                        <Editor v-else-if="['document_html', 'document_xlsx', 'document_map', 'document_flow', 'md', 'xmind'].includes(checkNode.type)"
                            :docId="checkNode.id" :knowId="checkNode.knowledgeId" ></Editor>
                        <iframe :src="iframeUrl" frameborder="0" v-else-if="iframeShow" class="iframe-box"></iframe>
                    </template>
                    <FileViewShow ref="fileViewShowRef" v-else
                                  v-if="checkNode.id && ['knowledge','directory'].indexOf(checkNode.type)==-1"
                                  :docInfo="checkNode" v-loading="fileLoading"
                                  @renderFinish="renderFinish" @refreshScrollState="refreshScrollState"
                                  @setMenuList="setMenuList" style="padding-right:8px;"
                                  :isScreen="isScreen"></FileViewShow>
                    <commit ref="commitRef" v-if="checkNode.id && ['knowledge','directory'].indexOf(checkNode.type)==-1"
                            v-show="!isScreen" :docInfo="checkNode" @refreshScrollState="refreshScrollState"
                            style="padding-right:16px;"></commit>
                    <jvs-empty v-if="!checkNode.id" imgSrc="@/assets/images/common/noCheck.png"
                               :text="$t('message.empty.nullPreview')"></jvs-empty>
                </el-scrollbar>
            </div>
            <!-- 其他信息页面 -->
            <!-- :class="{'menu-box':currentOtherType=='menu'}" -->
            <div class="knowledge-other">
                <knowInfo v-if="currentOtherType=='showInfo'" @close="closeOther" @backPage="backKnowledge"
                          @updateKnowInfo="updateKnowInfo" :knowInfo="dcLibrary"></knowInfo>
                <userAndDyn v-if="currentOtherType=='showUsers'" @close="closeOther" :knowInfo="dcLibrary"></userAndDyn>
                <menuLists v-show="currentOtherType=='menu' && !showMenuBut && menuList.length!=0"
                           v-if="['document_html','md'].includes(checkNode.type)" @close="changeMenuStatus"
                           :menuList="menuList"
                           @clickScroll="scrollNode" :show="currentOtherType=='menu' && !showMenuBut"
                           ref="menuListRef"></menuLists>
            </div>
            <div class="menu-button-box"
                 v-if="currentOtherType=='menu' && showMenuBut && ['document_html','md'].includes(checkNode.type)"
                 @click="changeMenuStatus">
                <svg class="menu-icon">
                    <use xlink:href="#keowledge-a-zu7044"></use>
                </svg>
            </div>
        </div>
        <!-- 标签的虚拟pop -->
        <el-popover
            ref="popoverRef"
            :virtual-ref="tagRef"
            trigger="click"
            virtual-triggering
            :visible="tagPopover"
            placement="right-start"
            popper-class="tag-popover-action">
            <div class="tag-body-box" v-click-outside="onClickTagOutside" v-loading="labelLoading">
                <div class="tag-input-box" :class="[ searchTagFocus && 'tag-input-foucs']">
                    <el-input v-model="searchTag" @focus="inputFoucs" @blur="inputBlur"
                              :placeholder="$t('message.placeholder.searchLabel')"></el-input>
                </div>
                <el-scrollbar ref="tagListRef">
                    <div class="tag-lists">
                        <div v-for="(item,index) in fileterTagList" :key="index" class="tag-item"
                             @click="bindDocLabel(item)">
                            <div class="tag-colour" :style="{'background-color':item.colour}"></div>
                            <div></div>
                            <div class="tag-name-box" v-tooltip-auto-show>
                                <el-tooltip :content="item.tagName" effect="light">
                                    <div class="tag-name">{{ item.tagName }}</div>
                                </el-tooltip>
                            </div>
                            <svg class="check-icon">
                                <use
                                    v-bind:xlink:href="`#${item.isSelect?'keowledge-a-zu3739':'keowledge-a-juxing2862biankuang'}`"></use>
                            </svg>
                        </div>
                        <div class="more-loading-box" v-if="labelPage.current!=1 && moreLoading">
                            <img class="refresh-img" src="../../assets/common/loading-page.gif">
                        </div>
                    </div>
                </el-scrollbar>
                <jvs-empty v-if="fileterTagList.length==0" text="" size="160px" style="margin-top:20px;"></jvs-empty>
            </div>
        </el-popover>
        <!-- 更多操作的选项 -->
        <el-popover
            ref="morePopoverRef"
            :virtual-ref="morebuttonRef"
            trigger="click"
            :visible="hidePopover"
            virtual-triggering
            placement="right-start"
            popper-class="more-popover-action"
        >
            <el-scrollbar>
                <div class="more-lists" v-click-outside="onClickOutside">
                    <template v-for="(item,index) in getCurMoreAction" :key="index">
                        <div v-if="item.type!='line'" class="more-item" @click="moreAction(item)"
                             :ref="(el)=>setMoreTypeRef(el,item,index)">
                            <svg class="svg-icon">
                                <use v-bind:xlink:href="`#${item.isActive?item.iconActive:item.icon}`"></use>
                            </svg>
                            <span class="name">{{ item.label }}</span>
                            <svg class="arrow-icon" v-if="item.isArrow">
                                <use xlink:href="#keowledge-a-zu4701"></use>
                            </svg>
                        </div>
                        <div v-else class="more-line"></div>
                    </template>
                </div>
            </el-scrollbar>
        </el-popover>
        <!-- 新建的虚拟弹窗 -->
        <el-popover
            ref="addPopoverRef"
            placement="right-start"
            :virtual-ref="addButPopoverRef"
            trigger="click"
            virtual-triggering
            :visible="addPopover"
            popper-class="more-popover-action"
        >
            <el-scrollbar>
                <div class="more-lists">
                    <template v-for="(item,index) in addActionList" :key="index">
                        <div class="more-item" @click="moreAction(item)">
                            <svg class="svg-icon">
                                <use v-bind:xlink:href="`#${item.icon}`"></use>
                            </svg>
                            <span class="name">{{ $t(item.label) }}</span>
                        </div>
                    </template>
                </div>
            </el-scrollbar>
        </el-popover>
        <!-- 导入的虚拟弹窗 -->
        <el-popover
            ref="importPopoverRef"
            placement="right-start"
            :virtual-ref="uploadButPopoverRef"
            trigger="click"
            virtual-triggering
            :visible="uploadPopover"
            popper-class="more-popover-action"
        >
            <el-scrollbar>
                <div class="more-lists">
                    <template v-for="(item,index) in uploadActionList" :key="index">
                        <div class="more-item" @click="moreAction(item)">
                            <svg class="svg-icon">
                                <use v-bind:xlink:href="`#${item.icon}`"></use>
                            </svg>
                            <span class="name">{{ $t(item.label) }}</span>
                        </div>
                    </template>
                </div>
            </el-scrollbar>
        </el-popover>
        <!-- 下载的虚拟弹窗 -->
        <!-- :placement="clickTopBar?'bottom':'right-start'" -->
        <el-popover
            ref="importPopoverRef"
            placement="right-start"
            :virtual-ref="downloadButPopoverRef"
            trigger="click"
            virtual-triggering
            :visible="downloadPopover"
            popper-class="more-popover-action">
            <el-scrollbar>
                <div class="more-lists">
                    <template v-for="(item,index) in downloadActionList" :key="index">
                        <div class="more-item" @click="moreAction(item)" v-if="item.show">
                            <svg class="svg-icon">
                                <use v-bind:xlink:href="`#${item.icon}`"></use>
                            </svg>
                            <span class="name">{{ $t(item.label) }}</span>
                        </div>
                    </template>
                </div>
            </el-scrollbar>
        </el-popover>
        <!-- 下拉的目录弹窗 -->
        <el-popover
            ref="moreBreadRef"
            :virtual-ref="moreBread"
            trigger="click"
            :visible="moreBreadPopover"
            virtual-triggering
            placement="bottom-start"
            popper-class="more-popover-action"
        >
            <el-scrollbar>
                <div class="more-lists" v-click-outside="moreBreadOutClick">
                    <template v-for="(item,index) in startRenderList" :key="index">
                        <div class="more-bread-item" :title="item.name" @click="backItem(item,index)">{{ item.name }}
                        </div>
                    </template>
                </div>
            </el-scrollbar>
        </el-popover>
        <selectKnow ref="selectKnowRef" :title="$t('message.text.moveTitle')" @callBack="getCheckedFile"></selectKnow>
        <el-dialog
            v-model="shareVisible"
            class="custom-dialog"
            width="616px"
            :show-close='false'
            :close-on-click-modal="false"
            modal-class="dialog-center"
            :before-close="handleClose">
            <div class="custom-dialog-header">
                <div class="title-box">
                    <div class="title">
                        {{
                            shareInfo.type == 'knowledge' ? $t('message.text.knowShareTitle') : $t('message.text.fileShareTitle')
                        }}
                    </div>
                </div>
                <svg class="close-icon" @click="handleClose">
                    <use xlink:href="#keowledge-danchuangguanbi1"></use>
                </svg>
            </div>
            <docShare ref="shareDialogRef" v-model:docInfo="shareInfo" class="share-dialog-box"></docShare>
        </el-dialog>
        <createFolder ref="createFolderRef" @createSuccess="createSuccess"></createFolder>
        <reName ref="reNameRef" @changeFileName="changeItemKeyVal"></reName>
    </div>
</template>

<script setup lang="ts">
import {
    ref, unref, nextTick, watch, onMounted, getCurrentInstance, computed, onBeforeUnmount, watchEffect, defineAsyncComponent
} from 'vue'
import type {ComponentInternalInstance} from 'vue'
import {useRouter, useRoute} from "vue-router"
import {
    getLibTree, locationOther, dclibRecycle, fileTreeSort, fileDown, downLoadFileD, downLoadFile, fileDictoryDec
} from '@/api/knowledge'
import {docStar, preview} from '@/api/common'
import {getTagAlls, editDocTag} from '@/api/tag'
// import type {checkNodeObj} from '@/types/common'
import {ClickOutside as vClickOutside} from 'element-plus'
// import type {FormRules} from 'element-plus'
import {copyText, downLoad} from '@/utils/util'
import {exportExcel} from '@/utils/export'
import {$permissionRole} from '@/utils/role'
import MindElixir from "mind-elixir";
import * as O from '@/utils/uniqueId'
import useCommonStore from '@/store/common.js'
import useKnowledgeStore from '@/store/knowledge.js'
import selectKnow from '@/views/selectKnow/index.vue'
import docShare from '@/views/common/docShare.vue'
import knowInfo from '@/views/common/knowInfo.vue'
import userAndDyn from '@/views/common/userAndDyn.vue'
import commit from '@/views/common/commit.vue'
import FileViewShow from '@/views/common/fileView.vue'
import menuLists from '@/views/common/menuList.vue'
import createFolder from '@/views/common/createFolder.vue'
import reName from '@/views/common/reName.vue'
import exampleData from "@/components/xmind-map/config/exampleData"
import screenPng from '@/assets/images/screen.png'
import noScreenPng from '@/assets/images/no_screen.png'
import MindMaps from 'simple-mind-map'
import MiniMap from 'simple-mind-map/src/plugins/MiniMap.js'
import Watermark from 'simple-mind-map/src/plugins/Watermark.js'
import KeyboardNavigation from 'simple-mind-map/src/plugins/KeyboardNavigation.js'
import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF.js'
import ExportXMind from 'simple-mind-map/src/plugins/ExportXMind.js'
import Export from 'simple-mind-map/src/plugins/Export.js'
import Drag from 'simple-mind-map/src/plugins/Drag.js'
import Select from 'simple-mind-map/src/plugins/Select.js'

import AssociativeLine from 'simple-mind-map/src/plugins/AssociativeLine.js'
import TouchEvent from 'simple-mind-map/src/plugins/TouchEvent.js'
import NodeImgAdjust from 'simple-mind-map/src/plugins/NodeImgAdjust.js'
import SearchPlugin from 'simple-mind-map/src/plugins/Search.js'
import Painter from 'simple-mind-map/src/plugins/Painter.js'

import Formula from 'simple-mind-map/src/plugins/Formula.js'
import {useHookI18n} from '@/hooks/i18n'
import {ADD_ACTION_LIST, DOWNLOAD_ACTION_LIST, MORE_ACTION_LIST, UPLOAD_ACTION_LIST} from "@/const/data";
import {setDomStyle} from "@/utils/common";

const Editor = defineAsyncComponent(() => import('@/views/editor/Editor.vue'))
const OfficeEditor = defineAsyncComponent(() => import('@/views/editor/OfficeEditor.vue'))


const {$t} = useHookI18n()
MindMaps.usePlugin(MiniMap)
    .usePlugin(Watermark)
    .usePlugin(Drag)
    .usePlugin(KeyboardNavigation)
    .usePlugin(ExportPDF)
    .usePlugin(ExportXMind)
    .usePlugin(Export)
    .usePlugin(Select)
    .usePlugin(AssociativeLine)
    .usePlugin(NodeImgAdjust)
    .usePlugin(TouchEvent)
    .usePlugin(SearchPlugin)
    .usePlugin(Painter)
    .usePlugin(Formula)
const selectKnowRef = ref()
const commonStore = useCommonStore()
const knowStore = useKnowledgeStore()
const router = useRouter();
const route = useRoute()
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
const knowledgeType = ref('')
const knowledgeId = ref('')
const treeSearch = ref('')
const treeLoading = ref(false)
const elTreeScrollRef = ref<any>('')
const enterFolder = ref(false)
const enterFolderId = ref('')
const searchHeight = ref(40)
const fileLoading = ref(false)
const iframeUrl = ref("")
const iframeShow = ref(false)
const editable = computed(() =>
    !(!$permissionRole('document_update',checkNode.value.dcIdentifying) || ['editor','office'].indexOf(editType(checkNode.value))==-1)
)

interface Tree {
    label: string,
    children?: Tree[]
}

const treeData = ref<Tree[]>([])
const treeRef = ref()
const defaultProps = {
    children: 'children',
    label: 'name',
}
const showOther = ref(false)
const showMenuBut = ref(false)
const dcLibrary = ref<any>({
    name: '',
    dcIdentifying: []
})
const folderInfo = ref<any>({
    dcIdentifying: []
})
const breadPath = ref<any[]>([])
const dcLibraryAuth = ref<object[]>()
const morebuttonRefs = ref<any>({})
const morebuttonRef = ref()
const morePopoverRef = ref()
//控制popover显示与隐藏
const hidePopover = ref(false)
const popoverData = ref<any>({
    type: '',
    id: '',
    parentId: '',
    nameSuffix: '',
    shareTimeType: '',
    dcIdentifying: [],
    share: false,
})
const addPopover = ref(false)
const uploadPopover = ref(false)
const addButPopoverRef = ref()
const uploadButPopoverRef = ref()
// 记录当前选中的树节点
const checkNode = ref<any>({})
// 记录当前的操作是那一项
const currAction = ref({})
const currentOtherType = ref('menu')
const menuList = ref<any[]>([])
const shareDialogRef = ref()
const shareVisible = ref(false)
// 下载的虚拟弹窗
const downloadPopover = ref(false)
const downloadButPopoverRef = ref()
const allDownloadRef = ref()
const clickTopBar = ref(false)
const isScreen = ref(false)
const viewFileScroll = ref()
const menuListRef = ref()
const uniId = ref<string>()
const createFolderRef = ref()
const reNameRef = ref()

const treeWidth = ref(240)
const searchTag = ref('')
const tagPopover = ref(false)
const labelLoading = ref(false)
const tagRef = ref()
const searchTagFocus = ref(false)
const labelList = ref<any[]>([])
const tagListRef = ref()
const labelPage = ref({
    size: 20,
    current: 1,
    total: 0
})
const tagScrollTop = ref(0)
const moreLoading = ref(false)
const openDocId = ref<any>('')
const firstInit = ref(false)
const shareInfo = ref({
    shareTimeType: 'PERPETUAL'
})
const topbarMoreAction = ref()
const topBarMorePopover = ref(false)
const startRender = ref(0)
const startRenderList = ref<any[]>([])
const sortName = ref('name')
const sortType = ref(false)
watch(() => route.params, (newV, oldV) => {
    if (!(newV.id || newV.knId)) {
        enterFolder.value = false
        enterFolderId.value = ''
        breadPath.value = []
        dcLibrary.value = {
            name: '',
            dcIdentifying: []
        }
        firstInit.value = false
    }
    if (newV.id != oldV.id && (newV.id || newV.knId)) {
        knowledgeId.value = (newV.id || newV.knId) as string
        enterFolderId.value = ''
        breadPath.value = []
        dcLibrary.value = {
            name: '',
            dcIdentifying: []
        }
        firstInit.value = false
        folderInfo.value = {
            dcIdentifying: []
        }
        morebuttonRefs.value = {}
        moreActionButRef.value = {}
        checkNode.value = {}
        currAction.value = {}
        enterFolder.value = false
        init()
    }
    knowledgeType.value = newV.type as string
})
watch(treeSearch, (val) => {
    treeRef.value!.filter(val)
})
watch(dcLibrary, (newV) => {
    knowStore.setDcLibrary(newV, uniId.value)
})
watch(enterFolderId, (newV) => {
    knowStore.setEnterFolderId(newV, uniId.value)
})
watch(() => route.query.docId, (newV) => {
    if (newV) {
        firstInit.value = false
        openDocId.value = newV
        init()
    }
})
watch(breadPath, (newV) => {
    knowStore.setBreadPath(newV, uniId.value)
})

watch(() => `${route.params.id}${route.params.type}`, () => {
    knowledgeId.value = route.params.id as string
    knowledgeType.value = route.params.type as string
    uniId.value = O.uniqueId(knowledgeType.value + '-' + knowledgeId.value)
})

onMounted(() => {
    knowledgeId.value = route.params.id as string
    knowledgeType.value = route.params.type as string
    openDocId.value = route.query.docId
    morebuttonRefs.value = {}
    moreActionButRef.value = {}
    uniId.value = O.uniqueId(knowledgeType.value + '-' + knowledgeId.value)
    dcLibrary.value = knowStore.dcLibrary[uniId.value] || {}
    enterFolderId.value = knowStore.enterFolderId[uniId.value] || ''
    breadPath.value = knowStore.breadPath[uniId.value] || []
    init();
    proxy.$eventBus.$on("refreshItemStatus", changeItemKeyVal);
    proxy.$eventBus.$on('refreshTree', refreshTree);
    proxy.$eventBus.$on('uploadrefreshTree', uploadrefreshTree);
    if (typeof BroadcastChannel !== 'undefined') {
        const knowledgeBroad = new BroadcastChannel('knowledgeMessage')
        knowledgeBroad.addEventListener("message", (data: any) => {
            if (data.data.type == 'changeFileName') {
                changeItemKeyVal('valChange', data.data.data)
            }
        }, true)
    }
})
onBeforeUnmount(() => {
    enterFolder.value = false
    knowStore.delKnowledge(uniId.value)
    proxy.$eventBus.$off("refreshItemStatus", changeItemKeyVal);
    proxy.$eventBus.$off('refreshTree', refreshTree);
    proxy.$eventBus.$off('uploadrefreshTree', uploadrefreshTree);
    proxy.$eventBus.$emit('changeCheckFile', {
        id: '',
        name: '',
        orderId: 0,
        parentId: '',
        dcIdentifying: [],
        type: ''
    })
})

const getCurrentWidth = computed(() => {
    let str = `calc(100% - ${treeWidth.value}px)`
    if (isScreen.value) {
        if (showOther.value) {
            str = 'calc(100% - 244px)'
        } else {
            str = 'calc(100% - 0px)'
        }
    } else {
        if (showOther.value) {
            str = `calc(100% - ${treeWidth.value}px - 268px)`
        } else {
            str = `calc(100% - ${treeWidth.value}px)`
        }
    }
    return str
})

const moreActionList = MORE_ACTION_LIST
const cliclMenuScroll = ref(false)
const bodyScrollTop = ref(0)
const fileViewShowRef = ref()
const addActionList = ref(ADD_ACTION_LIST)
const uploadActionList = UPLOAD_ACTION_LIST
const downloadActionList = ref(DOWNLOAD_ACTION_LIST)

function setMoreRef(el: any, data: any) {
    if (el) {
        morebuttonRefs.value[data.id] = el
    }
}

const getCurMoreAction = computed(() => {
    let arr: any[] = []
    moreActionList.forEach((item: any) => {
        item.isActive = false
        if (item.langLabel) {
            item.label = $t(item.langLabel)
        }
        if (item.label == $t('message.buttons.download')) {
            if (['document_html', 'xmind'].indexOf(popoverData.value.type) != -1) {
                item.isArrow = true
            } else {
                item.isArrow = false
            }
        }
        if (item.type == 'collect') {
            item.label = $t('message.buttons.collect')
            item.isActive = popoverData.value[item.propKey]
            if (item.isActive) {
                item.label = $t('message.buttons.unCollect')
            }
        }
        if (!item.includeFileType && !item.notIncludeFileType) {
            arr.push(item)
        } else if (item.includeFileType && item.includeFileType.indexOf(popoverData.value.type) != -1) {
            if (item.label == $t('message.buttons.unZip')) {
                if (['zip'].indexOf(popoverData.value.nameSuffix) != -1) {
                    arr.push(item)
                }
            } else {
                arr.push(item)
            }
        } else if (item.notIncludeFileType && item.notIncludeFileType.indexOf(popoverData.value.type) == -1) {
            if (item.label == $t('message.buttons.share')) {
                if (popoverData.value.share) {
                    arr.push(item)
                }
            } else {
                arr.push(item)
            }
        }
    })
    arr = arr.filter((item) => {
        if (!item.authName || item.authName.length == 0) {
            return true
        }
        return $permissionRole(item.authName, popoverData.value.dcIdentifying)
    })
    return arr
})
const moreActionButRef = ref<any>({})
const originNodeList = ref([])

function changeItemKeyVal(type: any, val: any) {
    switch (type) {
        case 'valChange':
            treeData.value.forEach((item: any) => {
                if (item.id == val.id) {
                    item[val.key] = val.changeVal
                }
            })
            break;

        default:
            break;
    }
}

function setMoreTypeRef(el: any, data: any) {
    if (el) {
        moreActionButRef.value[data.type] = el
    }
}

function refreshTree(val: any) {
    if (enterFolder.value) {
        if (val.parentId == folderInfo.value.id) {
            init()
        }
    } else {
        if (val.parentId == knowledgeId.value) {
            init()
        }
    }
}

function uploadrefreshTree(val: any) {
    val.forEach((item: any) => {
        if (!item.isMate) {
            item.isMate = true
            refreshTree(item)
        }
    })
    commonStore.setUploadFileList(val)
}

function init() {
    treeLoading.value = true
    treeData.value = []
    elTreeScrollRef.value?.setScrollTop(0)
    const queryId = firstInit.value ? (enterFolderId.value || knowledgeId.value) : (openDocId.value || enterFolderId.value || knowledgeId.value)
    getLibTree({
        id: queryId
    }).then(res => {
        if (res.data.code == 0) {
            // const sortName = ref('name')
            // const sortType = ref(false)

            if (res.data.data.dcLibrary.type == 'knowledge') {
                dcLibrary.value = res.data.data.dcLibrary
                dcLibrary.value.dcIdentifying = res.data.data.dcIdentifying || []
                sortName.value = dcLibrary.value.sortFieldName
                sortType.value = dcLibrary.value.sortDescIs
                res.data.data.directoryStructure.push({
                    id: dcLibrary.value.id,
                    name: dcLibrary.value.name,
                    pathId: dcLibrary.value.pathId,
                    type: dcLibrary.value.type
                })
            } else if (res.data.data.dcLibrary.type == "directory") {
                folderInfo.value = res.data.data.dcLibrary
                dcLibrary.value.dcIdentifying = res.data.data.dcIdentifying || []
                res.data.data.directoryStructure.push({
                    id: folderInfo.value.id,
                    name: folderInfo.value.name,
                    pathId: folderInfo.value.pathId,
                    type: folderInfo.value.type
                })
            } else {
                // res.data.data.directoryStructure.pop()
                dcLibrary.value = res.data.data.knowledge || {}
                sortName.value = dcLibrary.value.sortFieldName
                sortType.value = dcLibrary.value.sortDescIs
                if (!dcLibrary.value.dcIdentifying) {
                    dcLibrary.value.dcIdentifying = res.data.data.dcIdentifying || []
                }
            }
            if (['all', 'my'].includes(route.params.type as string)) {
                proxy.$eventBus.$emit('changeCheckFile', {
                    ...res.data.data.dcLibrary,
                    dcIdentifying: res.data.data.dcIdentifying
                })
            }
            enterFolder.value = res.data.data.directoryStructure.length > 1;
            breadPath.value = res.data.data.directoryStructure
            knowStore.setBreadPath(breadPath.value, uniId.value)
            treeData.value = res.data.data.data

            // 这里权限获取可能有问题，应为获取的文件的时候是获取文件的权限
            dcLibraryAuth.value = res.data.data.dcIdentifying || []
            if (!firstInit.value) {
                // 打开对应的文档
                if (openDocId.value) {
                    nextTick(() => {
                        treeRef.value.setCurrentKey(openDocId.value)
                        handleNodeClick(treeRef.value.getCurrentNode(openDocId.value))
                    })
                }
                firstInit.value = true
            }
        }
        treeLoading.value = false
    }).catch(() => {
        treeLoading.value = false
    })
}

function filterNode(value: string, data: any) {
    if (!value) return true
    return data.name.includes(value)
}

proxy.$eventBus.$on('select-doc', (data: any) => {
    handleNodeClick(data)
    toolBarAction('edit')
})

function handleNodeClick(data: any) {
    menuList.value = []
    showMenuBut.value = false
    showOther.value = false
    bodyScrollTop.value = 0
    cliclMenuScroll.value = false
    if (['knowledge', 'directory'].indexOf(data?.type) != -1) {
        enterFolderId.value = data.id
        init()
    } else {
        fileLoading.value = true
        if (checkNode.value.id == data.id) {
            fileViewShowRef.value?.refreshFile()
        } else [
            checkNode.value = data
        ]
        nextTick(() => {
            refreshScrollState()
        })
    }
}

function renderFinish() {
    viewFileScroll.value?.setScrollTop(0)
    if (['showUsers', 'showInfo'].includes(currentOtherType.value)) {
        showOther.value = true
        fileViewShowRef.value?.changeResize()
    }
    fileLoading.value = false
}

function backItem(item: any, index: number) {
    moreBreadPopover.value = false
    if (item.pathId.length == 0) {
        enterFolderId.value = ''
        enterFolder.value = false
    } else {
        if (item.id == enterFolderId.value || item.id == dcLibrary.value.id) return
        enterFolderId.value = item.id
    }
    if (index == 0) {
        folderInfo.value = {
            dcIdentifying: []
        }
    }
    init()
}

// function backFolder() {
//     if (breadPath.value?.length > 1) {
//         enterFolderId.value = breadPath.value.pop().id
//     } else {
//         enterFolderId.value = ''
//     }
//     init()
// }

// function searchSizeChange({height}) {
//     searchHeight.value = height + 8
// }

const toolRight = ref(86)

function toolRightSizeChange({width}: any) {
    toolRight.value = width
}

function toolLeftSizeChange() {
    calcShowBreadNum()
}

watchEffect(() => {
    [breadPath.value]
    calcShowBreadNum()
})

function calcShowBreadNum() {
    startRender.value = 0
    nextTick(() => {
        let renderNum = 0, renderWidth = 0
        const sumWidth = document.getElementById('bread-box')?.clientWidth - 122
        if (sumWidth > 0) {
            let i = breadPath.value?.length - 1
            for (; i >= 0; i--) {
                const domWidth = document.getElementById(`bread-item-${i}`)?.clientWidth
                renderWidth += domWidth
                if (renderWidth < sumWidth) {
                    renderNum += 1
                } else {
                    break
                }
            }
            if (renderWidth < sumWidth) {
                startRender.value = 0
                startRenderList.value = []
            } else {
                if (renderNum != 0) {
                    startRender.value = (breadPath.value?.length - renderNum) || 0
                } else {
                    startRender.value = breadPath.value?.length - 1
                }
                let arr: any[] = []
                breadPath.value?.forEach((item, index) => {
                    if (index < startRender.value) {
                        arr.push(item)
                    }
                })
                startRenderList.value = arr
            }
        }
    })
}

const moreBread = ref()
const moreBreadRef = ref()
const moreBreadPopover = ref(false)

function showMoreBread() {
    moreBreadPopover.value = true
}

function moreBreadOutClick() {
    moreBreadPopover.value = false
}

function doAction(type: string) {
    if (currentOtherType.value != type) {
        currentOtherType.value = type
        switch (type) {
            case "showUsers":
            case 'showInfo':
                showOther.value = true
                fileViewShowRef.value?.changeResize()
                break;
            default:
                showOther.value = false
                break;
        }
    } else {
        currentOtherType.value = 'menu'
        if (showMenuBut.value || checkNode.value.type != 'document_html' || (checkNode.value.type == 'document_html' && menuList.value.length == 0)) {
            showOther.value = false
        } else {
            showOther.value = true
        }
    }
}

function changeScreen() {
    isScreen.value = !isScreen.value
    fileViewShowRef.value?.changeResize()
}

function onClickOutside() {
    moreActionButRef.value = {}
    if (!tagPopover.value) {
        hidePopover.value = false
    }
    addPopover.value = false
    uploadPopover.value = false
    downloadPopover.value = false
}

function topClickOut() {
    topBarMorePopover.value = false
}

function getLabel() {
    moreLoading.value = true
    getTagAlls({
        dcId: popoverData.value.id,
        size: labelPage.value.size,
        current: labelPage.value.current
    }).then((res: any) => {
        if (res.data.code == 0) {
            labelPage.value.total = res.data.data.total
            labelList.value.push(...res.data.data.records)
            labelLoading.value = false
            moreLoading.value = false
        }
    })
}

const fileterTagList = computed(() => {
    return labelList.value.filter(item => {
        return item.tagName.indexOf(searchTag.value) != -1
    })
})

function onClickTagOutside() {
    tagPopover.value = false
}

function inputFoucs() {
    searchTagFocus.value = true
}

function inputBlur() {
    searchTagFocus.value = false
}

function bindDocLabel(item: any) {
    item.isSelect = !item.isSelect
    editDocTag({
        ...item,
        dcId: popoverData.value.id
    }).then(res => {
        if (res.data.code == 0) {
            let msg = $t('message.message.binLabelSuccess')
            if (!item.isSelect) {
                msg = $t('message.message.unbindLabelSuccess')
            }
            proxy.$onePrompt.$oneNotify({
                title: msg,
                type: "success",
                position: "bottom-right",
            });
        }
    })
}

function moreClick(node: any, data: any) {
    // 重新赋值virtual-ref绑定的
    morebuttonRef.value = morebuttonRefs.value[data.id]
    // 显示popover
    hidePopover.value = true
    // 赋值
    popoverData.value = data
    if (!popoverData.value.shareTimeType) popoverData.value.shareTimeType = 'PERPETUAL'
}

function treeScroll() {
    hidePopover.value = false
}

// 判定当前文件的类型是否可以编辑
function editType(item: any): string {
    let type = ''
    if (["document_map", "document_xlsx", "document_flow", "document_html", "md", 'xmind'].indexOf(item.type) > -1) {
        type = 'editor'
    } else if (['docx', 'xlsx', 'pptx', 'csv'].indexOf(item.nameSuffix) != -1) {
        type = 'office'
    } else {
        type = 'directory'
    }
    return type
}

// 更多操作
function moreAction(item: { type?: any; isArrow?: any; label?: any }) {
    uploadPopover.value = false
    downloadPopover.value = false
    addPopover.value = false
    currAction.value = item
    if (!['downLoadWORD', 'downLoadPDF', 'export-ssm', 'export-txt', 'export-md', 'export-pdf', 'export-svg', 'export-png', 'export-json', 'export-xmind'].includes(item.type)) {
        clickTopBar.value = false
    }
    if (!item.isArrow) {
        hidePopover.value = false
    }
    switch (item.type) {
        case 'addTag':
            tagPopover.value = true
            labelLoading.value = true
            tagRef.value = moreActionButRef.value[item.type]
            labelList.value = []
            getLabel()
            tagListRef.value.wrapRef.addEventListener("scroll", e => {
                const scrollTop = e.target.scrollTop
                const scrollHeight = e.target.scrollHeight
                const clientHeight = e.target.clientHeight
                if (
                    scrollTop > scrollHeight - clientHeight - 10 &&
                    scrollTop > tagScrollTop.value &&
                    !moreLoading.value && labelPage.value.current < Math.ceil(labelPage.value.total / labelPage.value.size)
                ) {
                    labelPage.value.current++
                    getLabel()
                }
                tagScrollTop.value = scrollTop
            })
            break
        case 'edit':
            hidePopover.value = false
            let editorType = editType(popoverData.value)
            if (editorType == 'directory') {
                createFolderRef.value.init('edit', popoverData.value, 'add_directory')
            } else {
                knowStore.setBackPage({
                    fromPage: knowledgeType.value,
                    docId: popoverData.value.id,
                    knowId: popoverData.value.knowledgeId,
                    dcLibrary: dcLibrary.value,
                    enterFolderId: enterFolderId.value,
                    breadPath: breadPath.value,
                }, O.uniqueId(knowledgeType.value + '-' + popoverData.value.knowledgeId + '-' + popoverData.value.id))
                if (editorType == 'editor') {
                    proxy.$openUrl(`/#/editor?knowId=${popoverData.value.knowledgeId}&docId=${popoverData.value.id}&fromId=${knowledgeType.value == 'my' ? 1 : 0}`, '_blank')
                } else if (editorType == 'office') {
                    proxy.$openUrl(`/#/editorOffice?knowId=${popoverData.value.knowledgeId}&docId=${popoverData.value.id}&fromId=${knowledgeType.value == 'my' ? 1 : 0}`, '_blank')
                }
            }
            break
        case 'reName':
            reNameRef.value.init(popoverData.value)
            break
        case 'download':
            if (item.isArrow) {
                downloadButPopoverRef.value = moreActionButRef.value[item.type]
                downloadActionList.value.forEach((item) => {
                    item.show = item.showType == popoverData.value.type
                })
                downloadPopover.value = true
            } else {
                if (['document_map', 'document_html', 'document_xlsx', 'xmind'].indexOf(popoverData.value.type) == -1) {
                    sourceFileDownload(popoverData.value)
                } else {
                    downloadFileFun(popoverData.value, '')
                }
            }
            break
        case 'del':
            hidePopover.value = false
            let delTitle = $t('message.confirm.delFileTitle'), delMess = $t('message.confirm.delFielContent')
            if (popoverData.value.type == 'directory') {
                delTitle = $t('message.confirm.delFolderTitle')
                delMess = $t('message.confirm.delFolderContent')
            }
            proxy.$confirm(delMess, delTitle, {
                confirmButtonText: $t('message.buttons.submit'),
                cancelButtonText: $t('message.buttons.cancal'),
                type: 'warning'
            }).then(() => {
                dclibRecycle(popoverData.value.id).then(res => {
                    if (res.data.code == 0) {
                        proxy.$onePrompt.$oneNotify({
                            title: $t('message.prompt'),
                            message: $t('message.message.delSuccess'),
                            position: 'bottom-right',
                            type: "success"
                        })
                        treeRef.value.remove(popoverData.value.id)
                    }
                })
            })
            break;
        case 'copy':
            let isFoler = `&knId=${popoverData.value.knowledgeId}&type=${popoverData.value.type}&fileName=${popoverData.value.fileName}&nameSuffix=${popoverData.value.nameSuffix}`
            if (enterFolderId.value) {
                isFoler = '&folderId=' + enterFolderId.value
            }
            copyText(window.location.origin + "/#" + route.path + "?docId=" + popoverData.value.id + isFoler, () => {
                proxy.$onePrompt.$oneNotify({
                    title: $t('message.prompt'),
                    message: $t('message.message.copySuccess'),
                    position: 'bottom-right',
                    type: "success"
                })
            })
            break
        case 'move':
            selectKnowRef.value.init()
            break;
        case 'share':
            shareVisible.value = true
            shareInfo.value = popoverData.value
            nextTick(() => {
                if (!shareInfo.value.shareTimeType) {
                    shareInfo.value.shareTimeType = 'PERPETUAL'
                }
                shareDialogRef.value.init()
            })
            break
        case 'collect':
            hidePopover.value = false
            sendCollect(popoverData.value.id)
            break
        case 'add':
            addButPopoverRef.value = moreActionButRef.value[item.type]
            addPopover.value = true
            break
        case 'upload':
            uploadButPopoverRef.value = moreActionButRef.value[item.type]
            uploadPopover.value = true
            break
        case 'uploadFile':
            proxy.$eventBus.$emit("uploadFile", 'file', ['directory', 'knowledge'].indexOf(popoverData.value.type) != -1 ? popoverData.value.id : popoverData.value.parentId)
            // uploadBoxRef.value.fileUpload('file',['directory','knowledge'].indexOf(popoverData.value.type)!=-1?popoverData.value.id:popoverData.value.parentId)
            break;
        case 'uploadFolder':
            proxy.$eventBus.$emit("uploadFile", 'folder', ['directory', 'knowledge'].indexOf(popoverData.value.type) != -1 ? popoverData.value.id : popoverData.value.parentId)
            // uploadBoxRef.value.fileUpload('folder',['directory','knowledge'].indexOf(popoverData.value.type)!=-1?popoverData.value.id:popoverData.value.parentId)
            break;
        case "setting":
            if (['directory', 'knowledge'].indexOf(popoverData.value.type) == -1) {
                proxy.$openDocSet({
                    docInfo: popoverData.value,
                })
            } else if (['directory'].indexOf(popoverData.value.type) != -1) {
                proxy.$openDirSet({
                    docInfo: popoverData.value,
                })
            }
            break;
        case 'document_html':
        case 'document_map':
        case 'document_xlsx':
        case 'document_flow':
        case 'md':
        case 'xmind':
        case 'office_doc':
        case 'office_xlsx':
        case 'office_ppt':
        case 'office_csv':
            proxy.$eventBus.$emit("createKnowFile", item.type, popoverData.value, item.label)
            break
        case "downLoadWORD":
            downloadFileFun(!clickTopBar.value ? popoverData.value : checkNode.value, 'docx')
            clickTopBar.value = false
            break
        case 'downLoadPDF':
            downloadFileFun(!clickTopBar.value ? popoverData.value : checkNode.value, 'pdf')
            clickTopBar.value = false
            break
        case 'export-xmind':
        case 'export-txt':
        case 'export-md':
        case 'export-pdf':
        case 'export-svg':
        case 'export-png':
        case 'export-json':
        case 'export-smm':
            downloadFileFun(!clickTopBar.value ? popoverData.value : checkNode.value, item.type)
            clickTopBar.value = false
            break
        case 'unZip':
            fileDictoryDec({
                id: popoverData.value.id
            }).then(res => {
                if (res.data.code == 0) {
                    proxy.$notify({
                        title: $t('message.downloadTitle'),
                        message: $t('message.message.unZipSuccess'),
                        type: 'success',
                        position: 'bottom-right'
                    })
                    init()
                }
            })
            break
        default:
            proxy.$eventBus.$emit('openFolder', item.type, popoverData.value)
            break;
    }
}

proxy.$eventBus.$on("menu-down-file", (param: any) => {
    fileViewShowRef.value?.downFile(param)
});

async function downloadFileFun(downItem: { id: any; name: string | any[]; type: any; nameSuffix: any }, downType: string) {
    let res, Dom: HTMLDivElement
    proxy.$openJvsMessage({
        message: $t('message.message.fileDownloading')
    })
    let storeDownItem = {
        id: downItem.id,
        name: downItem.name,
        isFinish: false,
        downTime: new Date().getTime()
    }
    let soteDownList = commonStore.downFileList
    soteDownList.push(storeDownItem)
    commonStore.setDownLoadFileList(soteDownList)
    switch (downItem.type) {
        case 'document_html':
            fileDown(downType, downItem.id).then(res => {
                if (res.data.code == 0) {
                    let downloadElement = document.createElement('a')
                    downloadElement.href = res.data.data
                    downloadElement.download = downItem.name + (downItem.name.indexOf(downItem.nameSuffix) != -1 ? '' : ('.docx'))
                    downloadElement.target = '_blank'
                    document.body.appendChild(downloadElement)
                    downloadElement.click()
                    document.body.removeChild(downloadElement)
                    soteDownList.forEach((item: any) => {
                        if (item.downTime == storeDownItem.downTime) {
                            item.isFinish = true
                        }
                    })
                    commonStore.setDownLoadFileList(soteDownList)
                }
            }).catch(() => {
                soteDownList.forEach((item: any) => {
                    if (item.downTime == storeDownItem.downTime) {
                        item.isFinish = true
                    }
                })
                commonStore.setDownLoadFileList(soteDownList)
            })
            break;
        case 'document_xlsx':
            let resData = []
            res = await preview(downItem.id)
            if (res.data.data.content && res.data.data.content.startsWith("{")) {
                resData = JSON.parse(JSON.parse(res.data.data.content).content);
            }
            exportExcel(resData, downItem.name, function () {
                soteDownList.forEach((item: any) => {
                    if (item.downTime == storeDownItem.downTime) {
                        item.isFinish = true
                    }
                })
                commonStore.setDownLoadFileList(soteDownList)
                proxy.$notify({
                    title: $t('message.downloadTitle'),
                    message: $t('message.message.downloadSuccess'),
                    type: 'success',
                    position: 'bottom-right'
                })
            })
            break;
        case 'xmind':
            if (clickTopBar.value) {
                fileViewShowRef.value?.downFile(downType.replace('export-', ''))
            } else {
                res = await preview(downItem.id)
                let contentData = JSON.parse(JSON.stringify(exampleData))
                if (res.data.data.content && res.data.data.content.startsWith("{")) {
                    const contentObj = JSON.parse(res.data.data.content)
                    contentData = JSON.parse(contentObj.content)
                } else if (res.data.data.content && res.data.data.content.startsWith("[")) {
                    contentData.root = MindMap.xmind.transformXmind(res.data.data.content)
                } else {
                    contentData.root = {
                        children: [],
                        data: {
                            text: '根节点',
                            expand: true,
                            isActive: false
                        }
                    }
                }
                Dom = await setDomStyle('downloadXmind')
                document.body.appendChild(Dom)
                const {root, layout, theme, view} = contentData
                const MindMap = new MindMaps({
                    el: Dom,
                    data: root,
                    layout: layout,
                    theme: theme.template,
                    themeConfig: theme.config,
                    viewData: view
                })
                setTimeout(async () => {
                    if (downType.replace('export-', '') === 'svg') {
                        await MindMap.export(downType.replace('export-', ''), true, downItem.name, `* {
                            margin: 0;
                            padding: 0;
                            box-sizing: border-box;
                        }`)
                    } else {
                        await MindMap.export(downType.replace('export-', ''), true, downItem.name, true)
                    }
                    soteDownList.forEach((item: any) => {
                        if (item.downTime == storeDownItem.downTime) {
                            item.isFinish = true
                        }
                    })
                    commonStore.setDownLoadFileList(soteDownList)
                    document.body.removeChild(Dom)
                }, 200)
            }
            break;
        case 'document_map':
            res = await preview(downItem.id)
            let type, content;
            const MindElixirList = [MindElixir.LEFT, MindElixir.RIGHT, MindElixir.SIDE]
            if (res.data.data.content && res.data.data.content.startsWith("{")) {
                let resData = JSON.parse(res.data.data.content).content;
                content = JSON.parse(resData);
            }
            if (res.data.data.otherJson) {
                type = JSON.parse(res.data.data.otherJson).type
            }
            Dom = setDomStyle('downloadMap')
            document.body.appendChild(Dom)
            const mindElixir = new MindElixir({
                locale: 'zh_CN',
                el: Dom,
                direction: MindElixirList[type],
                draggable: false, // 启用拖动
                contextMenu: false, // 启用右键菜单
                toolBar: true, // 启用工具栏
                nodeMenu: false, // 启用节点菜单
                keypress: false, // 启用快捷键
                editable: false // 可否编辑
            })
            setTimeout(async () => {
                const blob = await mindElixir.exportPng() // Get a Blob!
                document.body.removeChild(Dom)
                if (!blob) return
                const url = URL.createObjectURL(blob)
                const a = document.createElement('a')
                a.href = url
                a.download = `${downItem.name}.png`
                a.click()
                URL.revokeObjectURL(url)
                soteDownList.forEach((item: any) => {
                    if (item.downTime == storeDownItem.downTime) {
                        item.isFinish = true
                    }
                })
                commonStore.setDownLoadFileList(soteDownList)
            }, 50)
            if (!content || JSON.stringify(content) == '{}') {
                mindElixir.init(MindElixir.new('请输入文字'))
            } else {
                mindElixir.init(content)
            }
            break;
        default:
            break;
    }
}

// function setDomStyle(id: string) {
//     const Dom = document.createElement("div")
//     Dom.id = id
//     Dom.style.width = '100%'
//     Dom.style.height = '100%'
//     Dom.style.position = 'absolute'
//     Dom.style.top = '0'
//     Dom.style.zIndex = '-1'
//     Dom.style.opacity = '0'
//     Dom.style.pointerEvents = 'none'
//     return Dom
// }

// 发送收藏
function sendCollect(val: any) {
    docStar(val).then(res => {
        if (res.data.code == 0) {
            proxy.$onePrompt.$oneNotify({
                title: $t('message.prompt'),
                message: $t('message.message.actionSuccess'),
                type: 'success',
                position: 'bottom-right'
            })
            changeItemKeyVal('valChange', {
                id: val,
                key: 'collectIs',
                changeVal: res.data.data
            })
        }
    })
}

function handleClose() {
    shareVisible.value = false
}

function getCheckedFile(item: { knowledgeId: any; id: any }) {
    locationOther({
        id: popoverData.value.id,
        knowledgeId: item.knowledgeId || item.id,
        parentId: item.id
    }).then(res => {
        if (res.data.code == 0) {
            proxy.$onePrompt.$oneNotify({
                title: $t('message.prompt'),
                message: $t('message.message.moveSuccess'),
                type: 'success',
                position: 'bottom-right',
            })
            init()
        }
    })
}

function backKnowledge() {
    const breadLength = breadPath.value.length
    if (breadLength > 1) {
        backItem(breadPath.value[breadLength - 2], breadLength - 2)
    } else {
        enterFolderId.value = ''
        breadPath.value = []
        dcLibrary.value = {}
        enterFolder.value = false
        treeData.value = []
        nextTick(() => {
            router.push({
                path: `/knowledge/${knowledgeType.value}`
            })
        })
    }
}

function closeOther() {
    currentOtherType.value = 'menu'
    if (checkNode.value.type != "document_html") {
        if (!showMenuBut.value) {
            showOther.value = false
            fileViewShowRef.value?.changeResize()
        } else {
            showOther.value = true
        }
    } else {
        if (showMenuBut.value || menuList.value.length == 0) {
            showOther.value = false
        } else {
            showOther.value = true
        }
    }
}

function toolBarAction(type: any) {
    if (event.target.getAttribute('disabled') == 'true') {
        return
    }
    clickTopBar.value = true
    if (type != 'download') topBarMorePopover.value = false
    switch (type) {
        case 'collect':
            sendCollect(checkNode.value.id)
            break;
        case 'copy':
            let isFoler = `&knId=${checkNode.value.knowledgeId}&type=${checkNode.value.type}&fileName=${checkNode.value.fileName}&nameSuffix=${checkNode.value.nameSuffix}`
            if (enterFolderId.value) {
                isFoler = '&folderId=' + enterFolderId.value
            }
            copyText(window.location.origin + "/#" + route.path + "?docId=" + checkNode.value.id + isFoler, () => {
                proxy.$onePrompt.$oneNotify({
                    title: $t('message.prompt'),
                    message: $t('message.message.copySuccess'),
                    position: 'bottom-right',
                    type: "success"
                })
            })
            break
        case 'setting':
            if (['directory', 'knowledge'].indexOf(checkNode.value.type) == -1) {
                proxy.$openDocSet({
                    docInfo: checkNode.value,
                })
            } else if (['directory'].indexOf(popoverData.value.type) != -1) {
                proxy.$openDirSet({
                    docInfo: popoverData.value,
                })
            }
            break;
        case 'download':
            if (['document_html', 'xmind'].indexOf(checkNode.value.type) != -1) {
                downloadButPopoverRef.value = allDownloadRef.value
                downloadPopover.value = true
                downloadActionList.value.forEach((item) => {
                    item.show = item.showType == checkNode.value.type
                })
            } else {
                if (['document_map', 'document_html', 'document_xlsx', 'xmind'].indexOf(checkNode.value.type) == -1) {
                    topBarMorePopover.value = false
                    sourceFileDownload(checkNode.value)
                } else {
                    topBarMorePopover.value = false
                    fileViewShowRef.value?.downFile()
                }
            }
            break
        case "share":
            // if(!checkNode.value.share) return
            shareVisible.value = true
            shareInfo.value = checkNode.value
            nextTick(() => {
                if (!shareInfo.value.shareTimeType) {
                    shareInfo.value.shareTimeType = 'PERPETUAL'
                }
                shareDialogRef.value.init()
            })
            break
        case 'edit':
            if (!$permissionRole('document_update', checkNode.value.dcIdentifying)) return
            let editorType = editType(checkNode.value)
            knowStore.setBackPage({
                fromPage: knowledgeType.value,
                docId: checkNode.value.id,
                knowId: checkNode.value.knowledgeId,
                dcLibrary: dcLibrary.value,
                enterFolderId: enterFolderId.value,
                breadPath: breadPath.value,
            }, O.uniqueId(knowledgeType.value + '-' + checkNode.value.knowledgeId + '-' + checkNode.value.id))
            iframeShow.value = false
            if (editorType == 'editor') {
                iframeUrl.value = `/#/editor?knowId=${checkNode.value.knowledgeId}&docId=${checkNode.value.id}&fromId=${knowledgeType.value == 'my' ? 1 : 0}`
                // proxy.$openUrl(`/#/editor?knowId=${checkNode.value.knowledgeId}&docId=${checkNode.value.id}&fromId=${knowledgeType.value == 'my' ? 1 : 0}`, '_blank')
            } else if (editorType == 'office') {
                iframeUrl.value = `/#/editorOffice?knowId=${checkNode.value.knowledgeId}&docId=${checkNode.value.id}&fromId=${knowledgeType.value == 'my' ? 1 : 0}`
                // proxy.$openUrl(`/#/editorOffice?knowId=${checkNode.value.knowledgeId}&docId=${checkNode.value.id}&fromId=${knowledgeType.value == 'my' ? 1 : 0}`, '_blank')
            }
            nextTick(() => {
                iframeShow.value = true
            })
            break
        default:
            break;
    }
}

function sourceFileDownload(downItem: { id: any; name: any; type: string }) {
    proxy.$openJvsMessage({
        message: $t('message.message.fileDownloading')
    })
    let storeDownItem = {
        id: downItem.id,
        name: downItem.name,
        isFinish: false,
        downTime: new Date().getTime()
    }
    let soteDownList = commonStore.downFileList
    soteDownList.push(storeDownItem)
    commonStore.setDownLoadFileList(soteDownList)
    let fun = downLoadFile
    if (['directory', 'knowledge'].indexOf(downItem.type) != -1) {
        fun = downLoadFileD
    }
    fun({
        id: downItem.id,
        timestamp: new Date().getTime()
    }, 'blob', (e) => {

    }).then(res => {
        downLoad(res, true, () => {
            soteDownList.forEach((item: any) => {
                if (item.downTime == storeDownItem.downTime) {
                    item.isFinish = true
                }
            })
            commonStore.setDownLoadFileList(soteDownList)
        }, () => {

        })
    })
}

function refreshScrollState() {
    setTimeout(() => {
        viewFileScroll.value?.update()
    }, 100)
}

function setMenuList(val: string | any[], nodeList: never[]) {
    showMenuBut.value = false
    if (val.length != 0 && JSON.stringify(val) != '{}') {
        showOther.value = true
        menuList.value = val as any[]
    } else {
        menuList.value = []
    }
    originNodeList.value = nodeList || []
    setTimeout(() => {
        viewFileScroll.value?.update()
    }, 200)
}

function changeMenuStatus() {
    if (showMenuBut.value) {
        showMenuBut.value = false
        showOther.value = true
    } else {
        showOther.value = false
        showMenuBut.value = true
    }
}

function scrollNode(node: { id: string; nodeName: string }) {
    cliclMenuScroll.value = true
    // 编辑页布局更改后不需要减掉页面顶部偏移量
    // viewFileScroll.value.setScrollTop(node.offsetTop - 118)
    if (checkNode.value.type == 'document_html') {
        viewFileScroll.value?.setScrollTop(document.getElementById(node.id).offsetTop)
    } else if (checkNode.value.type == 'md') {
        viewFileScroll.value?.setScrollTop(document.getElementById(node.nodeName + '-' + node.id).offsetTop)
    }
    setTimeout(() => {
        cliclMenuScroll.value = false
    }, 100)
}

const commitRef = ref()

function bodyScroll({scrollTop}: any) {
    commitRef.value?.hiddenEditLog()
    bodyScrollTop.value = scrollTop
    if (cliclMenuScroll.value) return
    if (checkNode.value.type == 'document_html') {
        let lastId = ''
        originNodeList.value.forEach((item: any) => {
            if (item.innerHTML != '<br>') {
                if (['H1', 'H2'].indexOf(item.nodeName) > -1 && item.offsetTop - bodyScrollTop.value <= 14) {
                    lastId = item.id
                }
            }

        })
        if (lastId) {
            unref(menuListRef)?.setCurrentKey(lastId)
        }
    } else if (checkNode.value.type == 'md') {
        let lastId = ''
        originNodeList.value.forEach((item: any) => {
            if (document.getElementById(`h${item.level}-${item.id}`) && document.getElementById(`h${item.level}-${item.id}`)?.offsetTop - bodyScrollTop.value <= 14) {
                lastId = item.id
            }

        })
        if (lastId) {
            unref(menuListRef)?.setCurrentKey(lastId)
        }
    }
}

function createSuccess(val: { id: any; name: any; type: string; urlAddress: any }) {
    changeItemKeyVal('valChange', {
        id: val.id,
        key: 'name',
        changeVal: val.name
    })
    if (val.type == 'url_address') {
        changeItemKeyVal('valChange', {
            id: val.id,
            key: 'urlAddress',
            urlAddress: val.urlAddress
        })
    }
}

function handleSortCommand(val: string) {
    const type = val.split(',')[0], checkStatus = eval(val.split(',')[1])
    fileTreeSort({
        sortName: type,
        id: knowledgeId.value,
        isSortDesc: checkStatus
    }).then(res => {
        if (res.data.code == 0) {
            proxy.$notify({
                title: $t('message.prompt'),
                message: $t('message.message.sortSuccess'),
                type: 'success',
                position: 'bottom-right'
            })
            init()
        }
    })
}

function updateKnowInfo(val) {
    breadPath.value[0].name = val.name
    dcLibrary.value = val
}

function leftResize(e: MouseEvent) {
    // 处理拖动的时候不能选择文字
    document.onselectstart = function () {
        return false
    }
    const startX = e.clientX;
    const startWidth = treeWidth.value;
    const mouseMove = (documentE: MouseEvent) => {
        treeWidth.value = startWidth + (documentE.clientX - startX) * 1;
        if (treeWidth.value < 240) {
            treeWidth.value = 240
            stopMove()
        } else if (treeWidth.value > 350) {
            treeWidth.value = 350
            stopMove()
        }
    };
    const mouseUp = () => {
        stopMove()
    };

    function stopMove() {
        document.removeEventListener('mousemove', mouseMove);
        document.removeEventListener('mouseup', mouseUp);
        // 拖拽完记得重新设置可以选中
        document.onselectstart = function () {
            return true;
        };
    }

    document.addEventListener('mousemove', mouseMove);
    document.addEventListener('mouseup', mouseUp);
}

function openMoreTopBar() {
    topBarMorePopover.value = true
}

const dropNodeId = ref<string>()

function allowDrop(draggingNode: any, dropNode: { data: { type: string } }, type: string) {
    if (['knowledge', 'directory'].indexOf(dropNode.data.type) === -1) {
        return type !== 'inner';
    } else {
        return true;
    }
}

function allowDrag() {
    // 判断节点能否被拖拽
    return true
}

function handleDragStart(node: { key: string | undefined }, ev: any) {
    dropNodeId.value = node.key
}

function handleDragEnd() {

}

function handleDrop(draggingNode: any, dropNode: { key: any; parent: { key: any }; data: { type: string; id: any } }, dropType: string) {
    let nextId = undefined, parentId
    if (dropType === 'inner') {
        parentId = dropNode.key
    } else {
        let treeIndex = -1
        treeData.value.forEach((item: any, index) => {
            if (item.id == dropNodeId.value) {
                treeIndex = index
            }
        })
        if (treeIndex != -1 && treeIndex < treeData.value.length - 1) {
            nextId = treeData.value[treeIndex + 1].id
        }
        parentId = dropNode.parent.key || folderInfo.value.id || dcLibrary.value.id
    }
    const params = {
        id: dropNodeId.value,
        knowledgeId: knowledgeId.value,
        parentId: parentId,
        nextId: nextId
    }
    if (dropNode.data.type == 'directory' && dropType === 'inner') {
        treeData.value.forEach((item: any, index) => {
            if (item.id == dropNode.data.id) {
                delete treeData.value[index].children
            }
        })
        treeRef.value.remove(dropNodeId.value)
    }
    locationOther(params).then(res => {
        if (res.data && res.data.code == 0) {
            proxy.$notify({
                title: $t('message.prompt'),
                message: $t('message.message.actionSuccess'),
                type: 'success',
                position: 'bottom-right'
            });
        }
    })
}
</script>
<style lang="scss" scoped>
.knowledge-info-page {
    position: relative;
    width: 100%;
    height: 100%;
    // padding: 0px 24px 0px 0px;
    box-sizing: border-box;
    min-width: 800px;

    .knowledge-info-top-tool {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 24px;
        height: 36px;
        margin-bottom: 8px;
        margin-left: 24px;
        width: calc(100% - 48px);

        .tool-left {
            display: flex;
            align-items: center;
            overflow: hidden;

            .line {
                width: 1px;
                min-width: 1px;
                height: 8px;
                background: #D7D8DB;
                margin: 0px 8px;
            }

            .back-icon {
                width: 16px;
                min-width: 16px;
                height: 16px;
                cursor: pointer;
            }

            .knowledge-type {
                min-width: 56px;
                font-size: 14px;
                color: #6f7588;
            }

            .bread-box {
                display: flex;
                align-items: center;
                overflow: hidden;

                .bread-item {
                    display: flex;
                    align-items: center;

                    .el-icon {
                        cursor: pointer;
                    }

                    .next-icon {
                        width: 16px;
                        min-width: 16px;
                        height: 16px;
                    }

                    .knowledge-name {
                        font-size: 14px;
                        color: #363b4c;
                        cursor: pointer;
                        word-break: keep-all;
                        white-space: nowrap;
                        max-width: 260px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }

                    .knowledge-name-last {
                        @include SourceHanSansCN-Bold;
                    }
                }
            }

        }

        .tool-right {
            display: flex;
            align-items: center;
            word-break: keep-all;

            .action-button {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 32px;
                cursor: pointer;

                img {
                    width: 18px;
                    height: 18px;
                }

                span {
                    font-size: 12px;
                    margin-left: 2px;
                }
            }

            .action-button + .action-button {
                margin-left: 4px;
            }

            .icon {
                // width: 16px;
                // height: 16px;
                cursor: pointer;
                margin-right: 2px;
                font-size: 18px;
                outline: none !important;
                display: flex;
                align-items: center;
            }

            .hover-back {
                padding: 0px 5px;
            }

            .keowledge-shoucang-xuanzhong {
                color: #FBBB00;
            }

            .more-acitons-line {
                width: 1px;
                height: 24px;
                background: #F0F1F2;
                margin-left: 16px;
            }

            .more-actions {
                height: 32px;
                display: flex;
                align-items: center;
                padding: 0px 7px 0px 9px;
                margin-left: 7px;

                ::v-deep(.icon-box) {
                    width: 30px;
                    height: 30px;
                    border-radius: 4px;
                    cursor: pointer;
                    background-color: #EEEFF0;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    &:hover {
                        background-color: #F5F6F7 !important;
                    }

                    svg {
                        width: 16px;
                        height: 16px;
                    }

                    i {
                        font-size: 14px;
                        color: #575E73;
                    }

                    &:hover {
                        background-color: #eeeff0;
                    }
                }

                .icon-box + .icon-box {
                    margin-left: 10px;
                }

                .active {
                    background-color: #DDEAFF !important;

                    i {
                        font-size: 14px;
                        color: #1E6FFF;
                    }
                }
            }
        }
    }

    .knowledge-info-body {
        display: flex;
        height: calc(100% - 44px);
        position: relative;
        // 是否需要
        // overflow: hidden;
        .knowledge-left {
            // width: 240px;
            max-width: 350px;
            min-width: 240px;

            .knowledge-tree-search {
                margin-right: 16px;
                margin-bottom: 8px;
                margin-left: 24px;

                .search-box {
                    display: flex;
                    align-items: center;

                    .search-icon {
                        width: 14px;
                        height: 14px;
                    }

                    ::v-deep(.el-input) {
                        .el-input__wrapper {
                            box-shadow: none !important;
                            background-color: #F5F6F7 !important;
                        }
                    }

                    .sort {
                        width: 16px;
                        height: 16px;
                        cursor: pointer;
                        margin-left: 8px;
                    }
                }

                .back-folder-box {
                    display: flex;
                    align-items: center;
                    height: 36px;
                    border-bottom: 1px solid #EEEFF0;

                    .icon {
                        width: 14px;
                        height: 14px;
                        cursor: pointer;
                    }

                    .folder-name {
                        flex: 2;
                        text-align: center;
                        font-size: 14px;
                        color: #363B4D;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                }
            }

            .tree-box {
                // height: calc(100% - 32px);
                // padding-right:16px;
                padding-left: 8px;

                ::v-deep(.el-scrollbar>.el-scrollbar__wrap>.el-scrollbar__view) {
                    height: 100%;
                }

                .el-tree {
                    height: 100%;
                    padding-right: 8px;

                    ::v-deep(.el-tree-node__expand-icon) {
                        // display: none !important;
                        width: 1px !important;
                        height: 52px !important;
                        margin: 0px !important;
                        padding: 0px !important;
                    }

                    ::v-deep(.el-tree-node__content) {
                        height: 52px;
                        border-radius: 4px;

                        &:hover {
                            background: #DDEAFF !important;
                        }
                    }

                    ::v-deep(.is-current>.el-tree-node__content) {
                        background: #DDEAFF !important;
                    }

                    ::v-deep(.el-tree-node__content:has(.custom-active)) {
                        background: #DDEAFF !important;
                    }

                    ::v-deep(.custom-active) {
                        .action-box {
                            .share {
                                visibility: hidden !important;
                            }

                            .more {
                                visibility: visible !important;
                                z-index: 2;
                                color: #1E6FFF;
                                background: #EDF4FF;
                                border-radius: 4px 4px 4px 4px;
                            }
                        }
                    }

                    ::v-deep(.custom-tree-node) {
                        display: flex;
                        align-items: center;
                        padding-left: 16px;
                        width: 100%;

                        .node-info {
                            margin-left: 12px;
                            width: calc(214px - 68px);
                            overflow: hidden;

                            .name {
                                font-size: 14px;
                                color: #363B4C;
                                width: calc(100% - 0px);
                                text-overflow: ellipsis;
                                overflow: hidden;
                                white-space: nowrap;
                            }

                            .time {
                                width: calc(100% - 0px);
                                font-size: 12px;
                                color: #6F7588;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                white-space: nowrap;
                            }
                        }

                        &:hover {
                            .action-box {
                                .share {
                                    visibility: hidden;
                                }

                                .more {
                                    visibility: visible;
                                    z-index: 2;
                                }
                            }

                            .no-auth-aciton-box {
                                .share {
                                    visibility: visible;
                                }

                                .more {
                                    visibility: hidden;
                                    z-index: 2;
                                }
                            }
                        }

                        .action-box {
                            width: 20px;
                            height: 20px;
                            cursor: pointer;
                            border: none;
                            position: relative;

                            .action-icon {
                                width: 20px;
                                height: 20px;
                                outline: none !important;
                            }

                            .share {
                                visibility: visible;
                            }

                            .more {
                                font-size: 20px;
                                position: absolute;
                                left: 0px;
                                visibility: hidden;

                                &:hover {
                                    background: #EDF4FF;
                                    border-radius: 4px 4px 4px 4px;
                                    color: #1E6FFF;
                                }
                            }
                        }

                        .svg-icon {
                            width: 20px;
                            height: 20px;
                        }
                    }
                }
            }
        }

        .drop-width-line {
            height: 100%;
            width: 10px;
            // position: absolute;
            background-color: red;
            cursor: col-resize;
        }

        .knowledge-right {
            border-left: 1px solid #f5f6f7;

            .iframe-box {
                width: 100%;
                aspect-ratio: 16/9;
            }

            ::v-deep(.el-scrollbar>.el-scrollbar__wrap>.el-scrollbar__view) {
                height: 100%;
            }

            .file-view-box {
                min-height: calc(100vh - 252px);
            }
        }

        .txt-right-box {
            ::v-deep(.el-scrollbar>.el-scrollbar__wrap>.el-scrollbar__view) {
                height: auto;
            }
        }

        .knowledge-other {
            position: fixed;
            right: 0px;
            height: calc(100vh - 112px);
            max-width: 268px;
            z-index: 6;
        }

        .menu-box {
            height: auto;
        }

        .menu-button-box {
            position: fixed;
            width: 36px;
            height: 36px;
            background: #F5F6F7;
            border-radius: 6px 0px 0px 6px;
            right: 0px;
            top: 150px;
            z-index: 199;
            cursor: pointer;

            .menu-icon {
                width: 36px;
                height: 36px;
                cursor: pointer;
            }
        }
    }
}

.knowledge-screen-page {
    background-color: #FFFFFF;
    position: fixed;
    border-radius: 0;
    z-index: 100000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 16px 0px 0px 0px;
    box-sizing: border-box;

    .knowledge-info-top-tool {
        .tool-left {
            .back-icon, .line {
                display: none;
            }
        }
    }

    .knowledge-info-body {
        .knowledge-left {
            width: 0px !important;
            min-width: 0px !important;
            overflow: hidden;
        }

        .drop-width-line {
            display: none;
        }

        .knowledge-right {
            .file-view-box {
                min-height: calc(100vh - 60px);
            }
        }

        .knowledge-other {
            height: calc(100vh - 60px);
        }
    }
}
</style>
<style lang="scss">
.sort-dropdown {
    li {
        padding: 5px 14px 5px 8px !important;
    }

    .dropdown-item {
        display: flex;
        align-items: center;

        .check-icon {
            width: 16px;
            height: 16px;
            margin-right: 8px;
            visibility: hidden;
        }
    }

    .active {
        color: #1E6FFF;

        .check-icon {
            visibility: visible;
        }
    }
}

</style>